<!--
 * @Description: 
 * @Version: 1.0
 * @Author: Yuanjy
 * @Date: 2020-05-18 17:01:16
 * @LastEditors: Yuanjy
 * @LastEditTime: 2020-05-29 15:21:32
--> 
<template>
  <ul class="splists clearfix">
    <li class="list fl" v-if="data.length===0">
      <p class="no-data-tip">暂无数据</p>
    </li>
    <li class="list fl" v-else v-for="(item, index) in data" :key="index">
      <span class="name" v-html="item.name"></span>
      <!-- <span class="meal"></span> -->
      <span class="time" v-html="item.time"></span>
      <span class="type">待点评</span>
      <span class="el-icon-arrow-right sp-icon2" @click="serviceDetail(item.order_id, item.time, item)"></span>
      <span v-if="type !== 'uncomment'" class="el-icon-close sp-icon" @click="delComment(item, $event)"></span>
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      required: true
    },
    type: {
      type: String,
      required: true
    }
  },
  mounted() {
    
  },
  methods: {
    serviceDetail(id, date, item) {
      if (this.type !== 'uncomment') {
        let type = this.type
        if (this.type === 'reply') {
          type = item.item_type
        }
        this.$router.push('/order/serviceDetail/' + id + '?date=' + date + '&item_type=' + type + '&tab=punch')
      } else {
        this.$router.push('/order/serviceDetail/' + id + '?date=' + date + '&tab=punch')
      }
    },
    delComment (item, event) {
      this.$confirm('确认要关闭该记录吗')
        .then(_ => {
          let id = ''
          if (this.type === 'uncomment') {
            id = item.union_id
          } else if (this.type === 'reply') {
            id = item.id
          } else {
            id = item.diet_id
          }
          this.$api.punch.punch
            .delComment({
              data: { type: this.type, id: id }
            })
            .then(res => {
              this.$notify({ title: '成功', message: '该记录已关闭', type: 'success', duration: 2500 })
              let dli = event.target.parentNode
              dli.parentNode.removeChild(dli)
            }).catch(err => {
              console.log(err)
            })
        })
    }
  }
}
</script>

<style scoped>
ul li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.splists {
  background: #f4f8f8;
  padding: 20px 0;
}
.splists li {
  width: 44%;
  margin: 6px 5% 6px 1%;
  border: 1px solid #ddd;
  color: #777;
  box-sizing: border-box;
  font-size: 0;
  padding: 10px 0;
}
.splists li span {
  display: inline-block;
  text-align: center;
  font-size: 16px;
}
.splists li .name {
  width: 25%;
}
.splists li .meal {
  width: 12%;
}
.splists li .time {
  width: 25%;
}
.splists li .type {
  width: 12%;
}
.splists li .sp-icon2{
  width: 24%;
  font-size: 14px;
  cursor: pointer;
}
.splists li .el-icon-arrow-right{
  color: #20a0ff;
}
.no-data-tip {
  text-align: center;
  font-size: 16px;
  color: #000;
}
</style>